<script setup>
//自定义指令
import { ref } from 'vue'
const vHighlight = {
  mounted(el) {
    el.classList.add('is-highlight')
  }
}
//动画
const isVisible = ref(false)
const trigger = () => {
  console.log('触发动画')
  isVisible.value = !isVisible.value
}
//动态组件
import Ca from './Ca.vue'
import Cb from './Cb.vue'
const Cc = ref(true)
const triggerC = () => {
  Cc.value = !Cc.value
}
//作用域插槽
import Sa from './Sa.vue'
//vueuse
import { useIntersectionObserver } from '@vueuse/core'
const targetRef = ref()
const targetIsVisible = ref(false)
useIntersectionObserver(targetRef, ([{ isIntersecting }], observerElement) => {
  console.log('isIntersecting', isIntersecting)
  targetIsVisible.value = isIntersecting
})
</script>
<template>
  <!-- <div v-highlight>自定义指令</div> -->

  <!-- <h1 @click="trigger">练习动画</h1>
  <transition name="fade">
    <div v-show="isVisible" class="bg-red-900 w-10 h-10">66</div>
  </transition> -->

  <!-- <button @click="triggerC">切换组件</button>
  <keep-alive :max="10">
    <component :is="Cc ? Ca : Cb"></component>
  </keep-alive> -->
  <!-- <Ca v-if="Cc" />
  <Cb v-else /> -->

  <!-- <Sa v-slot="{ circle }"> 这是插槽的内容 {{ circle }} </Sa> -->
  <div
    style="height: 1200px; background-color: rebeccapurple; width: 200px"
  ></div>
  <div ref="targetRef">
    <h1>你看到了我</h1>
  </div>
</template>

<style lang="scss" scoped>
.is-highlight {
  background-color: yellow;
  font-weight: bold;
}
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}
</style>
